import Index from './views/Index'
import PropTypesDemo from './views/PropTypesDemo'
import ChilerenDemo from './views/ChilerenDemo'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink,
} from "react-router-dom";
import styles from './App.module.scss'

const routesPage = [
  {
    path: '/',
    component: Index,
    label: '首页'
  },
  {
    path: '/prop-types-demo',
    component: PropTypesDemo,
  },
  {
    path: '/chilerendemo',
    component: ChilerenDemo,
  },

]
export const routes = (
  <Switch>
    {routesPage.map((config, index) => {
      return <Route exact key={index} {...config} />
    })}
  </Switch>
)
export const links = (
  <ul>
    {
      routesPage.map(({ path, component, label }, index) => {
        return <li>
          <NavLink exact key={index} to={path} className={
            (isActive) => styles.navLink + (isActive ? ` ${styles.selected}` : '')}>{label || component.name}</NavLink>
        </li>
      })
    }
  </ul>
)
